<template>
	<div class="chapter-mine chapter-mine-d">
		<div class="exam-mine-nav">
			<van-nav-bar @click-left="clickLeft">
				<template #left>
					<img class="left-img" src="../../assets/img/back.png" />
				</template>
				<template #title>
					<div class="pc-b1">
						<div class="chapter-pc-title d-flex">
							<van-field v-model="value1" left-icon="" right-icon="search" placeholder="请输入你需要搜索的书名"
								@click-right-icon="onSearch" />
							<div class="btn-box btn-zsd">知识点</div>
							<div class="btn-box btn-dt" @click="openUrl('/answer')">答题</div>
						</div>
					</div>
				</template>
				<template #right>
					<div class="pc-b1 exam-pc-right">
						<div class="d-flex">
							<div class="rt-txt">目录</div>
							<div class="rt-txt" @click="showPicker = true">设置</div>
							<div class="rt-txt">登录</div>
						</div>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<div class="chapter-paper-box">
			<div class="pc-b2">
				<div class="tab-box d-flex d-col-bottom">
					<div class="answer-img">
						<img src="../../assets/img/answer.png" @click="openUrl('/details')" />
					</div>
					<div class="knowledge-img" @click="openUrl('/answer')">
						<img src="../../assets/img/knowledge.png" />
					</div>
				</div>
			</div>
			<!-- 章节内容 -->
			<div class="chapter-content">
				<div class="tit pc-b2">章节内容</div>
				<div class="pc-b2">
					<div class="d-flex chapter-card-box">
						<div class="chapter-card d-flex" @click="openUrl('/details')" v-for="(item,index) in list"
							:key="index">
							<div class="card-left d-flex d-col-center d-row-center">
								<span class="top-icon color-b f32">“</span>
								<div class="list-box f16">
									<div>
										第<span class="f32">{{ index+1 }}</span>章
									</div>
								</div>
								<span class="bottom-icon color-b f32">”</span>
							</div>
							<div class="card-right">
								<div class="chapter-name f16 color-h mb10">{{item.title}}</div>
								<div class="chapter-cont">
									{{item.introduction}}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="pc-b1 chapter-pc-w">
					<div class="d-flex">
						<div class="chapter-pc-left">
							<div class="d-flex list-box2" v-for="(item,index) in list"
								:class="{ active: index == active }" :key="index" @click="setActive(index)">
								<div class="d-flex d-col-center d-row-center">
									<div class="chapter-pc-num f16">
										<div>
											第<span class="f32">{{ index+1 }}</span>章
										</div>
									</div>
								</div>
								<div class="chapter-pc-b">
									<div class="chapter-pc-txt f16 col-block mb10">{{item.title}}</div>
									<div class="chapter-pc-cont">
										{{item.introduction}}
									</div>
								</div>
							</div>
						</div>
						<div class="chapter-content-cont">
							<div class="chapter-jj-box">
								<div class="f34 fbold chapter-pc-h2">第{{active+1}}章</div>
								<div class="f16 chapter-pc-h6">第{{active+1}}章 {{detail.title}}</div>
								<div class="intro-box f16">
									<span class="mr10">简介</span>
									{{detail.introduction}}
								</div>
								<div class="intro-box f16">
									<span class="mr10 mark">知识点</span>
									{{detail.knowledge}}
								</div>
								<div class="chapter-inset">
									<img src="../../assets/img/book/book12.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model:show="showPicker" round position="right">
			<settings></settings>
		</van-popup>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import Settings from "@/components/Settings.vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();
	const showPicker = ref(false);
	const clickLeft = () => {
		router.back();
	};
	const openUrl = (url) => {
		// router.back();
		router.push(url);
	};

	// pc段切换章节
	const active = ref(0)
	const detail = ref({
		title: "章節主題1",
		introduction: `1925年，魯迅在北京擔任大學講師期間，因支持學生運動而受到當時所謂“正人君子”的流言攻擊和排擠。
		1926 年， 北洋軍閥政府槍殺進步學生， 製造“ 三· 一八” 慘案。
		作者魯迅寫下《 紀念劉和珍君》 等一系列文章， 熱情支持學生的正義鬥爭， 控訴北洋軍閥政府的殘暴， 結果遭到當局的通緝而不得不遠走廈門避難。《 朝花夕拾》 中的作品雖然都是在追憶往事， 但也是“ 借題發揮”， 影射、 譏諷當時的社會現實。
		主體思想
		具有强烈的反封建思想， 文章中具有對封建教育、 封建道德、 封建頑固派的批判意識；
		表現了作者對親友和師長的崇敬、 懷念之情；
		批判封建思想、 封建制度對青少年的毒害思想；
		揭露思想文化戰線上資產階級文人的本質；
		作者以熾烈的感情和濃重的筆墨， 揭示了一個時代的各個側面。 `,
		knowledge: `具有强烈的反封建思想，文章中具有對封建教育、封建道德、封建頑固派的批判意識；
									表現了作者對親友和師長的崇敬、懷念之情；
									批判封建思想、封建制度對青少年的毒害思想；
									揭露思想文化戰線上資產階級文人的本質；
									作者以熾烈的感情和濃重的筆墨，揭示了一個時代的各個側面。`

	})
	const setActive = (index) => {
		active.value = index
		// detail.value.title = list[index].title
	}

	// 章节列表
	const list = ref([{
		title: "章節主題1",
		introduction: "這裡是章節1短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題2",
		introduction: "這裡是章節2短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題3",
		introduction: "這裡是章節3短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題4",
		introduction: "這裡是章節4短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題5",
		introduction: "這裡是章節5短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題6",
		introduction: "這裡是章節6短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題7",
		introduction: "這裡是章節7短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題8",
		introduction: "這裡是章節8短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題9",
		introduction: "這裡是章節9短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題10",
		introduction: "這裡是章節10短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題11",
		introduction: "這裡是章節11短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題12",
		introduction: "這裡是章節12短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題13",
		introduction: "這裡是章節13短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題14",
		introduction: "這裡是章節15短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題16",
		introduction: "這裡是章節16短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題17",
		introduction: "這裡是章節17短言主題介紹這裡是章節斷言"
	}, {
		title: "章節主題18",
		introduction: "這裡是章節18短言主題介紹這裡是章節斷言"
	}])
</script>

<style lang="scss" scoped>
	.chapter-mine {
		background-image: url("../../assets/img/mobile/back-flowers.png");
		background-size: 430px 318px;
		background-position: 30px 0;
		background-repeat: no-repeat;
		background-color: #fff;
		position: relative;

		.exam-pc-right {
			.rt-txt {
				margin-left: 65px;
			}
		}

		.chapter-pc-title {
			width: 700px;
			margin-left: -600px;

			.btn-box {
				width: 108px;
				height: 44px;
				padding: 0;
				line-height: 44px;
				background: linear-gradient(180deg, #83d1ff 0%, #4ca4fe 100%);
				color: #fff;

				&.btn-zsd {
					margin: 0 16px 0 100px;
				}

				&.btn-dt {
					background: linear-gradient(180deg, #ffbd02 0%, #ff8801 100%);
				}
			}
		}

		.chapter-paper-box {
			.tab-box {
				padding: 16px;

				div {
					width: calc(50% - 5px);

					img {
						width: 100%;
					}
				}

				.answer-img {
					margin-right: 10px;
				}

				.knowledge-img {
					padding-bottom: 10px;
				}

				@media screen and (min-width: 700px) {
					justify-content: center;

					div {
						width: 238px;

						img {
							width: 100%;
						}
					}
				}
			}

			.chapter-content {
				background: linear-gradient(208deg, #ebf8ff 0%, #ffffff 100%);
				border-radius: 0px 8px 8px 8px;
				padding: 16px;

				@media screen and (min-width: 1400px) {
					background: #f7f9fc;
				}

				.chapter-pc-w {
					width: 1100px;
					margin: 0 auto;
				}

				.chapter-content-cont {
					background: #f7f9fc;
					padding: 12px 0;
					margin-left: 86px;

					.chapter-pc-h2 {
						font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
						font-style: italic;
					}

					.chapter-pc-h6 {
						margin: 29px 0 16px;
					}

					.intro-box {
						margin-top: 20px;
						color: #9b9da0;

						span {
							font-size: 14px;
							padding: 0 8px;
							font-weight: bold;
							color: #fff;
							display: inline-block;
							background: linear-gradient(142deg, #65e98e 0%, #07aa33 100%);
							border-radius: 4px 4px 4px 4px;
						}

						.mark {
							background: linear-gradient(40deg,
									#4798cb 0%,
									rgba(71, 152, 203, 0.5) 100%);
						}
					}

					.chapter-inset {
						width: 100%;
						padding-top: 18px;
						text-align: center;
					}
				}

				.chapter-pc-left {
					width: 324px;

					.list-box2 {
						background: #ffffff;
						height: 86px;
						padding: 0 32px;
						cursor: pointer;

						.chapter-pc-b {
							padding: 20px 10px;
						}

						.chapter-pc-cont {
							color: #9b9da0;
							width: 180px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.chapter-pc-num {
							width: 80px;

							.f32 {
								display: inline-block;
								width: 40px;
								text-align: center;
							}
						}

						&:hover {
							background: #4098f9;

							div {
								color: #fff;
							}
						}

						&.active {
							background: #4098f9;

							div {
								color: #fff;
							}
						}
					}
				}

				.tit {
					font-size: 24px;
					font-weight: bold;
					color: #79aefa;
					margin-bottom: 14px;
				}

				.chapter-card-box {
					flex-wrap: wrap;
				}

				.chapter-card {
					width: calc(33.3333333% - 20px);
					height: 86px;
					background: #ffffff;
					box-shadow: 0px 2px 10px 0px rgba(211, 211, 211, 0.5);
					border-radius: 8px;
					margin-right: 20px;
					margin-bottom: 8px;
					cursor: pointer;
					transition: 0.3s ease;

					.card-left {
						height: 100%;
						width: 100px;
						padding: 10px;
						background: rgba(121, 174, 250, 0.15);
						position: relative;

						.top-icon {
							position: absolute;
							top: 0px;
							left: 4px;
						}

						.bottom-icon {
							position: absolute;
							right: 6px;
							bottom: -8px;
						}

						.list-box {
							color: #252626;
							font-weight: bold;
							height: 60px;

							span {
								font-family: YouSheBiaoTiHei-Regular;
								width: 40px;
								display: inline-block;
								text-align: center;
							}
						}
					}

					.card-right {
						padding: 16px 10px;

						.chapter-cont {
							width: 240px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.chapter-name {}
					}

					@media screen and (max-width: 1110px) {
						width: calc(50% - 20px);

						&:last-child {
							//margin-top: 20px;
							margin-left: 0px;
						}
					}

					@media screen and (max-width: 700px) {
						width: 100%;
						margin-right: 0;

						&+.app-card {
							margin-left: 0;
						}
					}
				}
			}
		}

		@media screen and (min-width: 800px) {
			background-size: 600px 418px;
			background-position: center -30px;
		}

		@media screen and (min-width: 1400px) {
			background: #f7f9fc;
		}
	}
</style>